<template>
	<view>
		<view class="top-date-view">
			<view class="circle-date" @click="leftClick">
				<u-icon name="arrow-left" color="#ffffff"></u-icon>
			</view>
			<text class="title">
				{{beginDateStr}}-{{endDateStr}}
			</text>
			<view class="circle-date" @click="rightClick">
				<u-icon name="arrow-right" color="#ffffff"></u-icon>
			</view>
		</view>
		<u-table fontSize="18">
			<u-tr>
				<u-th>周一</u-th>
				<u-th>周二</u-th>
				<u-th>周三</u-th>
				<u-th>周四</u-th>
				<u-th>周五</u-th>
				<u-th>周六</u-th>
				<u-th>周日</u-th>
			</u-tr>
			<view v-if="maxCount > 0">
				<u-tr v-for="(item, index) in maxCount">
					<!-- <u-td class="td">1</u-td> -->
					<view class="td">
						<u-td >
							<early-item v-if="hasValue(0, index)" :course="getItem(0, index)"></early-item>
							<view v-else></view>
						</u-td>
					</view>
					<view class="td">
						<u-td >
							<early-item v-if="hasValue(1, index)" :course="getItem(1, index)"></early-item>
							<view v-else></view>
						</u-td>
					</view>
					<view class="td">
						<u-td >
							<early-item v-if="hasValue(2, index)" :course="getItem(2, index)"></early-item>
							<view v-else></view>
						</u-td>
					</view>
					<view class="td">
						<u-td>
							<early-item v-if="hasValue(3, index)" :course="getItem(3, index)"></early-item>
							<view v-else></view>
						</u-td>
					</view>
					<view class="td">
						<u-td >
							<early-item v-if="hasValue(4, index)" :course="getItem(4, index)"></early-item>
							<view v-else></view>
						</u-td>
					</view>
					<view class="td">
						<u-td >
							<early-item v-if="hasValue(5, index)" :course="getItem(5, index)"></early-item>
							<view v-else></view>
						</u-td>
					</view>
					<view class="td">
						<u-td >
							<early-item v-if="hasValue(6, index)" :course="getItem(6, index)"></early-item>
							<view v-else></view>
						</u-td>
					</view>
				</u-tr>
			</view>
			<u-empty v-else class="noContent" text="暂时没有内容哦～"  mode="list"></u-empty>
		</u-table>
	</view>
</template>

<script>
	const days = [1, 2, 3, 4, 5, 6, 0];
	import {
		getPlanEarlyByDate
	} from '@/api/course.js'
	import {
		getWeekFirstDay,
		getWeekLastDay,
		formatDate,
		isEmpty
	} from '@/utils/utils.js'
	import EarlyItem from "./item.vue"
	export default {
		components: {
			EarlyItem
		},
		data() {
			return {
				beginDateStr: '',
				endDateStr: '',
				position: 0,
				
				scheduleData: [],
				maxCount: 0,
				
			}
		},
		onLoad() {
			// // #ifdef APP
			// 	plus.screen.unlockOrientation(); //解除锁定屏幕方向
			// 	plus.screen.lockOrientation('landscape-primary');
			// // #endif
			uni.showLoading()
			setTimeout(() => {
				this.getCourse()
			}, 1000 * 1);
		},
		onUnload() {
			// // #ifdef APP
			// 	plus.screen.unlockOrientation();//解除锁定屏幕方向
			// 	plus.screen.lockOrientation('portrait-primary');
			// // #endif
		},
		methods: {
			leftClick() {
				this.position -= 1;
				this.getCourse();
			},
			rightClick() {
				this.position += 1;
				this.getCourse();
			},
			
			hasValue(trIndex, tdIndex) {
				const list = this.scheduleData[parseInt(trIndex)];
				// console.log(`trIndex:${trIndex},tdIndex:${tdIndex}`)
				if (list.length > 0 && list.length > tdIndex) {
					const item = list[parseInt(tdIndex)];
					return true
				}
				return false
			},
			
			getItem(trIndex, tdIndex) {
				const list = this.scheduleData[parseInt(trIndex)];
				if (list.length > 0 && list.length > tdIndex) {
					const item = list[parseInt(tdIndex)];
					return item
				}
				return null
			},

			getValue(trIndex, tdIndex) {
				const list = this.scheduleData[parseInt(trIndex)];
				// console.log(`trIndex:${trIndex},tdIndex:${tdIndex}`)
				// console.log(list)
				if (list.length > 0 && list.length > tdIndex) {
					const item = list[tdIndex];
					// console.log(item)
					// const beginTime = formatDate(item.beginTime, 'hh:MM');
					// const endTime = formatDate(item.endTime, 'hh:MM');
					const beginTime = 'begin';
					const endTime = 'end';
					return `<view>${beginTime}-${endTime}</view>`
						+ '<view style="text-overflow: -o-ellipsis-lastline;overflow: hidden;'
						+ 'text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;'
						+ `-webkit-box-orient: vertical;">${item.courseName}</view>`
						+ `<view>人数:${item.childNum}</view>`
				}
				return '1';
			},

			getTest() {
				return '<view>12:00-13:00</view>'
					+ '<view style="text-overflow: -o-ellipsis-lastline;overflow: hidden;'
					+ 'text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;'
					+ '-webkit-box-orient: vertical;">三月暖阳像妈妈—可爱的小草（爬爬班）</view>'
					+ `<view>人数:</view>`
			},

			getCourse() {
				const areaId = this.$store.state.user.tchInfo.area.id;
				const now = new Date();
				const day = this.position * 7;
				now.setDate(now.getDate() + day);
				const beginDate = getWeekFirstDay(now);
				const endDate = getWeekLastDay(now);
				let maxCount = 0;
				this.beginDateStr = formatDate(beginDate, 'yyyy年mm月dd日');
				this.endDateStr = formatDate(endDate, 'yyyy年mm月dd日');
				getPlanEarlyByDate(areaId, formatDate(beginDate), formatDate(endDate)).then(res => {
					uni.hideLoading()
					console.log(res);
					let scheduleData = [];
					for (let i = 0; i < days.length; i++) {
						let dayIndex = days[i];
						let list = [];
						let count = 0;
						for (let index in res.data) {
							let item = res.data[index];
							// console.log(item.courseDate);
							let date = new Date(item.courseDate);
							// console.log(date);
							// console.log(date.getDay());
							// console.log(dayIndex)
							if (dayIndex === date.getDay()) {
								list.push(item);
								count += 1;
							}
						}
						if (count >= maxCount) {
							maxCount = count;
						}
						scheduleData.push(list);
					}
					this.scheduleData = scheduleData;
					this.maxCount = maxCount;
					// console.log(this.maxCount);
					// console.log(this.scheduleData);
				})
			}
		}
	}
</script>

<style lang="scss">
	.top-date-view{
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		
		.circle-date{
			width: 40rpx;
			height: 40rpx;
			background-color: $app-check-color;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.title{
			margin-left: 30rpx;
			margin-right: 30rpx;
		}
	}
	
	.td {
		height: 180rpx;
		overflow: hidden;
		flex: 1;
	}
</style>
